// 库存销量模块
<template>
  <div class="com_container" style="height: 100%">
    <div style="height: 100%" class="com_chart" ref="stock_page"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "Stock",
  data() {
    return {
      dom: null, // 挂载图表容器的实例对象
      data: null, // 服务器中获取的数据
      timerId: null,
      currentIndex: 0,
      titleFontSize: 0
    };
  },
  // 模板渲染成html后调用
  mounted() {
    this.initChart(); // 初始化图表
    window.addEventListener("resize", this.screenAdapt);
    this.screenAdapt();
  },
  // 组件销毁后
  destroyed() {
    clearInterval(this.timerId); // 关闭定时器
    window.removeEventListener("resize", this.screenAdapt); // 移除这个事件
  },
  methods: {
    // 初始化echart实例(lnstance)对象
    initChart() {
      this.dom = this.$echarts.init(this.$refs.stock_page, this.theme);
      this.dom.setOption({
        title: {
          text: "▎库存与销量分析",
          top: 20,
          left: 20,
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
      });
      this.getData();
      this.dom.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.dom.on('mouseout', () => {
        this.startInterval()
      })
    },
    // 获取服务器的数据
    async getData() {
      // 获取数据
      const { data: res } = await this.$http.get("stock");
      console.log(res);
      this.data = res;
      this.updateChart();
      this.startInterval();
    },
    // 更新图表视图
    async updateChart() {
      // console.log('嗨害嗨')
      const centerArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];
      const colorArr = [
        ["#4FF778", "#0BA82c"],
        ["#E5DD45", "#E8B11c"],
        ["#E8821c", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
      ];
      let start = this.currentIndex * 5;
      let end = (this.currentIndex + 1) * 5;
      let showData = this.data.slice(start, end);
      let seriesArr = showData.map((item, index) => {
        return {
          type: "pie",
          radius: [this.titleFontSize * 2.5 + 10, this.titleFontSize * 2.5],
          center: centerArr[index], // 位置
          hoverAnimation: false,
          labelLine: {
            show: false,
          },
          label: {
            position: "center",
            color: colorArr[index][0],
            fontSize: this.titleFontSize / 1.4
          },
          data: [
            {
              name: item.name + "\n\n" + item.sales,
              value: item.stock,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorArr[index][0],
                  },
                  {
                    offset: 1,
                    color: colorArr[index][1],
                  },
                ]),
              },
            },
            {
              value: item.sales,
              itemStyle: {
                color: "#333843",
              },
            },
          ],
        };
      });
      // 配置项
      let option = {
        series: seriesArr,
      };
      this.dom.setOption(option);
    },
    // 当浏览器大小发生变化时，就要让图表适配屏幕
    screenAdapt() {
      this.titleFontSize = this.$refs.stock_page.offsetWidth / 100 * 3.6
      this.dom.setOption({
        title: {
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
      });
      this.dom.resize()
    },
    startInterval() {
      this.timerId = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex > 1) {
          this.currentIndex = 0
        }
        this.updateChart()  // 在更改完currentIndex之后，需要更新界面
      }, 1000)
    },
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.dom.dispose() // 销毁当前的图表
      this.initChart()  // 重新以最新的主题名称初始化图表对象
      this.screenAdapt()  // 完成屏幕的适配
      this.updateChart()  // 更新图表的展示
    }
  }
};
</script>

<style lang="less" scoped>
</style>